<template>
    <section style="overflow-y: auto;" :style="{height: height+'px'}">
        <el-tabs type="border-card" v-model="tab" v-loading="loading">
            <el-tab-pane label="工艺单相关文件" name="1">
                <el-radio-group v-model="radioTab" size="mini" style="margin-bottom: 4px;" >
                    <el-radio-button label="all">全部</el-radio-button>
                    <el-radio-button label="1" v-if="user.source_from=='fs' || user.role=='gc_chengyi'">封样板</el-radio-button>
                    <el-radio-button label="2" v-if="user.source_from=='fs' || user.role=='gc_chengyi'">压皱板</el-radio-button>
                    <el-radio-button label="3" v-if="user.source_from=='fs' || user.role=='gc_xiuhua'">绣花板</el-radio-button>
                </el-radio-group>
                <el-button :type="(ruleData.sealed_status == 1 ?'danger':'warning')" plain size="mini"
                           @click="lockBtn" :loading="lockLoading" style="float: right">
                    {{ruleData.sealed_status == 1 ? "解锁":"锁定"}}
                </el-button>
                <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="data" border stripe size="mini">
                    <el-table-column label="文件名称"  prop="title" show-overflow-tooltip>
                        <template slot-scope="{row}">
                            <i class="el-icon-folder-opened"></i>&nbsp;{{row.title}}
                        </template>
                    </el-table-column>
                    <el-table-column label="文件类别" align="center" prop="type_id" width="140">
                        <template slot-scope="{row}">
                            <el-select v-if="editForm.id == row.id" v-model="editForm.type_id" placeholder="请选择" size="small">
                                <el-option v-for="item in typeIds[1]" :key="item.type_id" :label="item.title" :value="item.type_id"></el-option>
                            </el-select>
                            <span v-else>{{ row.type_id | type(row.type_id) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="颜色" align="center" prop="color_title">
                        <template slot-scope="{ row }">
                            <template v-if="editForm.id == row.id">
                                <el-select v-model="editForm.color_title" placeholder="请选择" size="small">
                                    <el-option v-for="item in colours" :key="item.color_title" :label="item.color_title" :value="item.color_title"></el-option>
                                </el-select>
                            </template>
                            <template v-else>
                                {{ row.color_title }}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="上传人员" align="center" prop="username" width="100"></el-table-column>
                    <el-table-column label="状态" align="center" prop="status" width="100">
                        <template slot-scope="{row}">
                            <el-tag size="mini" type="success" v-if="row.status==1">启用</el-tag>
                            <el-tag size="mini" type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="上传时间" align="center" prop="createtime" width="140"></el-table-column>
                    <el-table-column label="备注" align="center" prop="remarks">
                        <template slot-scope="{ row }">
                            <template v-if="editForm.id == row.id">
                                <el-input size="small" placeholder="输入备注" v-model="editForm.remarks" clearable></el-input>
                            </template>
                            <template v-else>
                                {{ row.remarks }}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150">
                        <template slot-scope="{row}">
                            <template v-if="editForm.id == row.id">
                                <el-button class="el-icon-circle-close" type="text" @click="cancelBtn">取消</el-button>
                                <el-button class="el-icon-check" type="text" style="color: #E6A23C" :loading="btnLoading" @click="saveBtn">保存</el-button>
                            </template>
                            <template v-else>
                                <el-button class="el-icon-download" type="text" @click="downloadFile(row.url, row.title)">下载</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="封样报告相关文件" name="2">
                <el-button :type="(ruleData.sealed_status == 1 ?'danger':'warning')" plain size="mini"
                           @click="lockBtn" :loading="lockLoading" style="float: right;margin-bottom: 4px;">
                    {{ruleData.sealed_status == 1 ? "解锁":"锁定"}}
                </el-button>
                <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="data" border stripe size="mini">
                    <el-table-column label="文件名称" prop="title" show-overflow-tooltip>
                        <template slot-scope="{row}">
                            <i class="el-icon-folder-opened"></i>&nbsp;{{row.title}}
                        </template>
                    </el-table-column>
                    <el-table-column label="文件类别" align="center" prop="type_id" width="140">
                        <template slot-scope="{row}">
                            <el-select v-if="editForm.id == row.id" v-model="editForm.type_id" placeholder="请选择" size="small">
                                <el-option v-for="item in typeIds[2]" :key="item.type_id" :label="item.title" :value="item.type_id"></el-option>
                            </el-select>
                            <span v-else>{{ row.type_id | type(row.type_id) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="颜色" align="center" prop="color_title">
                        <template slot-scope="{ row }">
                            <template v-if="editForm.id == row.id">
                                <el-select v-model="editForm.color_title" placeholder="请选择" size="small">
                                    <el-option v-for="item in colours" :key="item.color_title" :label="item.color_title" :value="item.color_title"></el-option>
                                </el-select>
                            </template>
                            <template v-else>
                                {{ row.color_title }}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="上传人员" align="center" prop="username" width="100"></el-table-column>
                    <el-table-column label="状态" align="center" prop="status" width="100">
                        <template slot-scope="{row}">
                            <el-tag size="mini" type="success" v-if="row.status==1">启用</el-tag>
                            <el-tag size="mini" type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="上传时间" align="center" prop="createtime" width="140"></el-table-column>
                    <el-table-column label="备注" align="center" prop="remarks" show-overflow-tooltip>
                        <template slot-scope="{ row }">
                            <template v-if="editForm.id == row.id">
                                <el-input size="small" placeholder="输入备注" v-model="editForm.remarks" clearable></el-input>
                            </template>
                            <template v-else>
                                {{ row.remarks }}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150">
                        <template slot-scope="{row}">
                            <template v-if="editForm.id == row.id">
                                <el-button class="el-icon-circle-close" type="text" @click="cancelBtn">取消</el-button>
                                <el-button class="el-icon-check" type="text" style="color: #E6A23C" :loading="btnLoading" @click="saveBtn">保存</el-button>
                            </template>
                            <template v-else>
                                <el-button class="el-icon-download" type="text" @click="downloadFile(row.url, row.title)">下载</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </section>
</template>

<script>

import {designDetailLock, designDetailFileSave} from "@/api/bs/design";
import {getToken} from "@/libs/util";

export default {
    name: "designFile",
    props: {
        ruleData:{
            type: Object,
            default: {}
        },
        fileData:{
            type: Array,
            default: []
        },
        styleColour:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
    },
    filters: {
        type(e) {
            if (e == 1) {
                return "封样板";
            }
            if (e == 2) {
                return "压皱板";
            }
            if (e == 3) {
                return "绣花板";
            }
            if (e == 5) {
                return "大货样板";
            }
            if (e == 6) {
                return "绣花全码版";
            }
            return "暂无";
        },
    },
    data() {
        return {
            data: [],
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],
            tab: "1",
            radioTab: 'all',
            editForm: {},
            typeIds: {
                1: [{title: "封样板", type_id: 1}, {title: "压皱板", type_id: 2}, {title: "绣花板", type_id: 3}],
                2: [{title: "大货样板", type_id: 5}]
            },
            colours: [],

            lockLoading: false,
            uploadHeaders: {},
            uploadData:{type: 'sealed_sample', disk: 'file'},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{
        styleColour(newValue, oldValue){
            let data = newValue.map((e) => {
                e.color_title = e.colour_number + "-" + e.colour;
                return e;
            });
            data.unshift({ color_title: "通用" });
            this.colours = data;
        },
        fileData(newValue, oldValue){
            this.data = newValue.filter(item => {
                if(this.radioTab != "all"){
                    return item.group_id == this.tab && item.type_id == this.radioTab
                }else{
                    return item.group_id == this.tab;
                }
            });
        },
        tab(newValue, oldValue){
            this.data = this.fileData.filter(item => {
                if(this.radioTab != "all" && newValue != 2){
                    return item.group_id == newValue && item.type_id == this.radioTab;
                }else{
                    return item.group_id == newValue;
                }
            });
        },
        radioTab(newValue, oldValue){
            if(newValue == "all"){
                this.data = this.fileData.filter(item => item.group_id == this.tab &&
                    (this.user.source_from=='fs' || (this.user.role=='gc_xiuhua' && item.type_id == 3) || (this.user.role=='gc_chengyi' && item.type_id != 3)));
            }else{
                this.data = this.fileData.filter(item => item.group_id == this.tab && item.type_id == newValue);
            }
        },
    },
    methods: {
        lockBtn(){
            let {id, type_no, sealed_status} = this.ruleData;
            let status = sealed_status == 1 ? 0 : 1;
            let label = sealed_status == 1 ? "解锁" : "锁定";
            let obj = {
                id: id,
                type_no: type_no,
                type: 8,
                status: status,
            };
            this.$confirm("确定"+label, '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.lockLoading = true;
                designDetailLock(obj).then((res)=>{
                    this.lockLoading = false;
                    if(res.code === 0){
                        this.$message.success(label+"成功");
                        this.$set(this.ruleData, 'sealed_status', status);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.lockLoading = false;
                })
            }).catch(() => {

            });
        },
        //修改状态
        changStatus(index, value){
            let msg = value ? "启用" : "禁用"
            this.$confirm(msg+"状态，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value,
                    group_id: this.data[index].group_id,
                    color_title: this.data[index].color_title,
                    type_id: this.data[index].type_id,
                    type_no: this.data[index].type_no
                };
                designDetailFileSave(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                        this.$emit("getData");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },
        //编辑按钮
        editBtn(row){
            this.editForm = Object.assign({}, row);
        },
        //取消按钮
        cancelBtn(){
            this.editForm = {};
        },
        //保存按钮
        saveBtn(){
            let obj = {
                id: this.editForm.id,
                group_id: this.editForm.group_id,
                color_title: this.editForm.color_title,
                type_id: this.editForm.type_id,
                remarks: this.editForm.remarks,
                type_no: this.editForm.type_no
            };
            this.btnLoading = true;
            designDetailFileSave(obj).then((res) => {
                this.btnLoading = false;
                if(res.code === 0){
                    this.editForm = {};
                    this.$message.success("修改成功");
                    this.$emit("getData");
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.btnLoading = false;
            });
        },
        //下载
        downloadFile(url, name){
            window.open('/api/tool/fileExport'+`?path=${url}&type=url&name=${name}`, '_self');
        },
        //上传之前的检测
        beforeUploadHandle(file) {
            if(!/(\.dxf|\.plt|\.prj|\.fgs)$/.test(file.name)){
                this.$message.error('只能上传.dxf, .plt, .prj, .fgs文件');
                return false;
            }
            this.uploadData.tab = this.tab;
            this.uploadData.radioTab = this.radioTab;
            this.uploadData.type_no = this.ruleData.type_no;
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //上传成功
        uploadSuccessHandle(res) {
            if(res.code === 0){
                this.$emit("getData")
            }else{
                this.$message.error(res.msg);
            }
        },
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
